<template>
  <van-pull-refresh style="background-color: #f8f8f8; height: 100vh; overflow-y: scroll" v-if="info"
                    class="wrap van_pull_refresh"
                    v-model="loading"
                    @refresh="getInfo"

  >
    <div class="card">
      <div class="row" style="justify-content: space-between; width: 100%">
        <!--        退款状态：0-待审核  1-退款中 2-退款成功 3-拒绝退款 4-取消退款 5-平台介入 6-主动退款-->
        <text class="status-text">{{ refundStatusEnum[info.status] }}</text>
        <van-button type="primary" round @click="cancelRefund" v-if="[0,1].indexOf(info.status)!==-1">撤销退款申请
        </van-button>
      </div>
      <div style="font-size: 12px;color: grey" v-if="info.status===2">已到账</div>
      <div style="height: 5px"></div>
      <div class="divider"></div>
      <div style="height: 5px"></div>

      <div class="row" style="justify-content: space-between; width: 100%">
        <text class="text-refund-price-title">退款金额</text>
        <text class="text-refund-price-number">{{ info.refundPrice }}</text>
      </div>
      <div class="row" style="justify-content: space-between; width: 100%">
        <text class="text-refund-price-title">退款账户</text>
        <text class="text-refund-price-title">原路返回</text>
      </div>
      <a
          :href="`tel:${info.linkPhone}`"
          style="justify-content: center; width: 100%; color: black"
      >
        <div
            class="row"
            style="justify-content: center; width: 100%"
        >
          <div
              style="display: flex; flex-direction: column; align-items: center"
          >
            <van-icon name="service-o"/>
            <text>联系商家</text>
          </div>
        </div>
      </a>
    </div>
    <div class="dividerH"></div>
    <div class="card">
      <div>
        <text class="status-text">退款流程</text>
      </div>
      <van-steps direction="vertical" :active="0">
        <van-step v-for="item in info.processInfoVos">
          <h3 style="font-weight: bold">{{ statusProcessMap[item.type] }}</h3>
          <p>{{ item.str }}</p>
          <p>{{ item.time }}</p>
        </van-step>

      </van-steps>
    </div>
    <div class="dividerH"></div>
    <div class="card">
      <div>
        <text class="status-text">退款信息</text>
      </div>
      <div class="divider"></div>
      <div class="row" style="align-items: start">
        <van-image
            width="120"
            height="80"
            radius="5"
            fit="cover"
            :src=" `${fileUrl}/${info.spuListVos[0].imageId}`"

        />
        <div style="width: 10px"></div>
        <div style="display: flex; flex-direction: column">
          <div style="font-size: 12px; font-weight: bold">
            {{ info.spuListVos[0].spotName }} {{ info.spuListVos[0].spuName }}
          </div>

          <div class="row" style="align-items: center" v-if="info.spuListVos[0].scenicSpotTimeSlots.length">
            <img
                src="@/views/activityPages/assets/calendar.png"
                class="img"
                mode="scaleToFill"
            />
            <div style="width: 3px"></div>
            <text class="subText">
              {{
                info.spuListVos[0].scenicSpotTimeSlots[0].timeHour.join('到') + ' ' + info.spuListVos[0].scenicSpotTimeSlots[0].timeSlot.join(',')
              }}
            </text
            >
          </div>
          <div class="row" style="align-items: center;padding-top: 5px">
            <img
                src="@/views/activityPages/assets/arcoDesign-location.png"
                class="img"
            />
            <div style="width: 3px"></div>
            <text class="subText"
            >
              {{ info.spuListVos[0].address }}
            </text
            >
          </div>

          <!--          <TimePlace-->
          <!--              :place="info.spuListVos[0].address"-->
          <!--              :time="info.spuListVos[0].scenicSpotTimeSlots[0].timeHour.join('到')+' ' + info.spuListVos[0].scenicSpotTimeSlots[0].timeSlot.join(',')"></TimePlace>-->
        </div>
      </div>
      <div class="row" style="justify-content: space-between; width: 100%;padding-top: 5px">
        <text>退款金额</text>
        <text>￥{{ info.refundPrice }}（{{ info.refundCount }}张）</text>
      </div>
      <div class="divider"></div>
      <div class="row" style="justify-content: space-between; width: 100%">
        <text>退款单号</text>
        <text class="grey-text-12">{{ info.refundNumber }}</text>
      </div>
      <div
          class="row"
          style="width: 100%; align-items: start; justify-content: space-between"
      >
        <div>退款原因</div>

        <div
            style="
            display: flex;
            flex-direction: column;
            align-items: end;
          "
        >
          <div class="grey-text-12">{{ info.reason }}</div>

        </div>
      </div>
      <div
          class="row"
          style="width: 100%; align-items: start; justify-content: space-between"
      >
        <div>退款备注</div>

        <div
            style="
            display: flex;
            flex-direction: column;
            align-items: end;
          "
        >
          <div class="grey-text-12">{{ info.remark }}</div>

        </div>
      </div>
      <div
          class="row"
          style="width: 100%; align-items: start; justify-content: space-between"
      >
        <div style="min-width: 100px">描述凭证</div>

        <div
            style="
            display: flex;
            flex-direction: column;
            align-items: end;
          "
        >

          <div
              class="row reasons"
              style="flex-wrap: wrap; justify-content: flex-end"
          >
            <van-image v-for="(item,index) in info.imagesIds?.split(',').filter(Boolean)" :key="item" :src="`${fileUrl}/${item}`"
                       style="margin: 2px"
                       width="65" height="65" radius="5"
                       @click="()=>{showImagePreview({
                       images:info.imagesIds?.split(',').map(e=>`${fileUrl}/${e}`),
                       startPosition:index
                       })}"></van-image>
          </div>

        </div>
      </div>
    </div>
  </van-pull-refresh>
  <van-skeleton :row="20" v-if="!info"/>

</template>

<script setup lang="ts">
import api from '@/api/index';
import {useRoute} from 'vue-router';
import {ref} from 'vue';
import {refundStatusEnum} from "@/views/activityPages/const/refundStatus.ts";
import {showImagePreview} from "vant";

const fileUrl = import.meta.env.VITE_FILE_URL

const route = useRoute();
const info = ref(null);
const statusProcessMap = {
  "0": "待审核",
  "1": "退款中",
  "2": "退款成功",
  "3": "拒绝退款",
  "4": "取消退款",
  "5": "平台介入",
  "6": "主动退款",
  "7": "商家审核通过",
  "-1": "申请退款"
}


const loading = ref(false)

function getInfo() {
  loading.value = true
  api.getRefundInfo({refundNumber: route.query.id}).then((res) => {
    info.value = res.data;
    if (info.value?.processInfoVos) {
      info.value.processInfoVos.reverse()
    }
  }).finally(() => {
    loading.value = false
  });
}

getInfo();


function cancelRefund() {
  api.getScenicCancelRefund({refundNumber: route.query.id}).then((res) => {
    getInfo()
  })
}
</script>

<style scoped lang="scss">
@import url('@/views/activityPages/style/card.css');

.grey-text-12 {
  font-size: 12px;
  color: grey;
}

.status-text {
  color: rgb(16, 16, 16);
  font-size: 18px;
  font-weight: bold;
}

.text-refund-price-number {
  color: rgba(51, 51, 51, 1);
  font-size: 20px;
  font-weight: bold;
}

.withdraw {
  padding: 5px;
  border-radius: 4px;
  background-color: rgba(241, 157, 57, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 12px;
  text-align: center;
}

.text-refund-price-title {
  color: rgb(16, 16, 16);
  font-size: 16px;
}

.reasons {
  img {
    border-radius: 5px;
    padding: 2px;
    width: 100px;
    height: 80px;
  }
}

.img {
  width: 15px;
  height: 15px;
}
</style>
